<template>
  <div class="my-blog-page">
    <!-- 用户头部信息 -->
    <div class="user-header">
      <div class="user-avatar" v-if="blogData.avatar">
        <img :src="blogData.avatar" alt="用户头像" />
      </div>
      <div class="user-info">
        <!-- 昵称 -->
        <h2 class="nickName">{{ blogData.nickName }}</h2>
        <p class="user-desc">记录我的技术成长与生活点滴</p>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-number">{{ blogData.blogCount || 0 }}</span>
            <span class="stat-label">文章</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ blogData.collectCount || 0 }}</span>
            <span class="stat-label">收藏</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ blogData.bloglikeCount || 0 }}</span>
            <span class="stat-label">点赞</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ blogData.commentCount || 0 }}</span>
            <span class="stat-label">评论</span>
          </div>
        </div>
      </div>
      <div class="user-actions">
        <el-button type="primary" icon="el-icon-edit" @click="addBlog">写博客</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="content-container">
        <!-- 左侧内容 -->
        <div class="left-content">
          <!-- 文章管理 -->
          <div class="section">
            <div class="section-header">
              <h2><i class="el-icon-document"></i>我的博客</h2>
              <div class="article-filter">
                <el-select
                  v-model="queryParams.category"
                  placeholder="请选择类别"
                  clearable
                  @change="getBlogListByCategory(queryParams.category)"
                >
                  <el-option
                    v-for="dict in dict.type.blog_cat"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </div>
            </div>

            <!-- 表格 -->
            <div class="article-list">
              <el-table
                ref="table"
                v-loading="loading"
                :data="myBlogList"
                height="300"
                highlight-current-row
                :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
              >
                <el-table-column label="序号" align="center" type="index" :index="indexMethod"/>
                <el-table-column show-overflow-tooltip label="标题" align="center" prop="title">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleBlogDetail(scope.row)">
                      <el-link type="primary">{{ scope.row.title }}</el-link>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column label="封面" align="center" prop="cover" width="100">
                  <template slot-scope="scope">
                    <image-preview :src="scope.row.cover" :width="50" :height="50"/>
                  </template>
                </el-table-column>
                <el-table-column label="类别" align="center" prop="category">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.blog_cat" :value="scope.row.category"/>
                  </template>
                </el-table-column>
                <el-table-column label="观看量" align="center" prop="views"/>
                <el-table-column label="点赞数" align="center" prop="blogLikeCount"/>
                <el-table-column label="收藏数" align="center" prop="collectCount"/>
                <el-table-column label="评论数" align="center" prop="commentCount"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination">
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 博客详情 / 新增编辑 -->
    <BlogDetail ref="blogDetail"/>
    <AddOrUpdateBlog ref="addOrUpdateBlog" @ok="getList"/>
  </div>
</template>

<script>
import { delBlog, selectBlogListByUserId, selectBlogDataByUserId } from '@/api/lundao/blog'
import BlogDetail from '@/views/components/blogDetail/index.vue'
import AddOrUpdateBlog from '@/views/components/AddOrUpdateBlog/index.vue'

export default {
  name: 'MyBlog',
  components: { BlogDetail, AddOrUpdateBlog },
  dicts: ['blog_cat'],
  data() {
    return {
      blogData: {},          // 头部统计数据
      loading: false,        // 表格加载
      myBlogList: [],        // 表格数据
      total: 0,              // 总条数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: this.$store.state.user.userId,
        category: null
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /* 查询入口：统一拿头部统计 + 表格数据 */
    getList() {
      this.loading = true
      Promise.all([
        selectBlogDataByUserId(),                       // 头部
        selectBlogListByUserId(this.queryParams)        // 表格
      ]).then(([res1, res2]) => {
        // 关键2：可选链 + 默认值
        this.blogData = {
          ...res1.data,
          avatar: res1.data?.avatar ? process.env.VUE_APP_BASE_API + res1.data.avatar : ''
        }
        this.myBlogList = res2.rows || []
        this.total = res2.total || 0
      }).catch(() => {
        this.$message.error('加载失败')
      }).finally(() => {
        this.loading = false   // 关键3：无论成败都关loading
      })
    },
    /* 按类别筛选 */
    getBlogListByCategory(category) {
      this.queryParams.category = category
      this.getList()
    },
    /* 序号计算 */
    indexMethod(index) {
      const pageNum = this.queryParams.pageNum - 1
      return pageNum > 0 ? index + 1 + pageNum * this.queryParams.pageSize : index + 1
    },
    /* 增删改查 */
    addBlog() {
      this.$refs.addOrUpdateBlog.handleAdd()
    },
    handleUpdate(row) {
      this.$refs.addOrUpdateBlog.handleUpdate(row)
    },
    handleDelete(row) {
      const blogIds = row.blogId
      this.$modal.confirm('确定删除选中记录？').then(() => delBlog(blogIds))
        .then(() => {
          this.$modal.msgSuccess('删除成功')
          this.getList()
        })
    },
    handleBlogDetail(row) {
      this.$refs.blogDetail.handleOpen(row.blogId)
    }
  }
}
</script>

<style scoped>
/* 样式保持你原来的，不动 */
.my-blog-page { background-color: #f5f7fa; }
.user-header { display: flex; align-items: center; background-color: #fff; padding: 30px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.user-avatar { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin-right: 30px; border: 4px solid #f0f2f5; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; }
.nickName { margin: 0 0 10px; font-size: 24px; color: #333; }
.user-desc { margin: 0 0 15px; color: #666; font-size: 14px; }
.user-stats { display: flex; }
.stat-item { margin-right: 30px; text-align: center; }
.stat-number { display: block; font-size: 20px; font-weight: bold; color: #333; margin-bottom: 5px; }
.stat-label { font-size: 12px; color: #999; }
.user-actions { width: 200px; }
.main-content { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 20px; }
.content-container { display: flex; }
.left-content { flex: 1; margin-right: 20px; }
.section { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.05); margin-bottom: 20px; overflow: hidden; }
.section-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #ebeef5; }
.section-header h2 { margin: 0; font-size: 18px; color: #333; display: flex; align-items: center; }
.section-header i { margin-right: 8px; color: #409eff; }
.article-filter { display: flex; align-items: center; }
.article-filter .el-select { width: 120px; margin-right: 10px; }
.article-list { padding: 0; }
.article-title-link { color: #333; text-decoration: none; margin-right: 8px; }
.article-title-link:hover { color: #409eff; }
.pagination { padding: 2px 2px; text-align: right; border-top: 1px solid #ebeef5; }
.summary-item .label { display: block; font-size: 12px; color: #909399; margin-bottom: 5px; }
.summary-item .value { display: block; font-size: 18px; font-weight: bold; color: #333; }
</style>
